<template>
  <a-col :span="labelSpan">
    <a-form-model-item class="upload-img" :label="attrObj.formLabel">
      <a-upload-dragger
        accept=".png,.jpg"
        class="avatar-uploader"
        :action="`${BASE_URL}/upload/uploadImages`"
        list-type="picture-card"
        :showUploadList="false"
        :headers="headers"
        @change="handleChange"
        :disabled="attrObj.isDisabled"
        :before-upload="beforeUpload"
      >
        <div v-if="!attrObj.formModel[attrObj.formProps] && !attrObj.isDisabled">
          <p class="ant-upload-drag-icon">
            <a-icon type="plus" />
          </p>
          <p class="ant-upload-text">点击上传</p>
          <p
            class="descrip-text"
            v-if="!attrObj.formModel[attrObj.formProps] && !attrObj.isDisabled"
          >
            只支持jpg、png类型的文件，大小不超过500k
          </p>
        </div>
        <div v-else class="upload-img">
            <viewer ref="viewer" :images="[attrObj.formModel[attrObj.formProps]]">
              <img :src="attrObj.formModel[attrObj.formProps] || emptyImg" />
            </viewer>
            <span class="upload-actions" @click.stop="() => null">
              <span class="upload-actions-eye" @click.stop="onLook">
                <a-icon type="eye"></a-icon>
              </span>
              <span v-if="!attrObj.isDisabled" class="upload-actions-delete ml20" @click.stop="onDel">
                <a-icon type="delete"></a-icon>
              </span>
            </span>
          </div>
      </a-upload-dragger>
    </a-form-model-item>
  </a-col>
</template>
<script>
import { BASE_URL } from "@/services/api";
import Cookie from "js-cookie";
export default {
  name: "UploadDarg",
  data() {
    return {
      emptyImg: require("@/assets/img/emptyImg.png"),
      BASE_URL,
      headers: {
        Authorization: Cookie.get("Authorization"),
        enterpriseId: Cookie.get("enterpriseId"),
        openId: Cookie.get("openId"),
        roleId: Cookie.get("roleId"),
        departmentId: Cookie.get("departmentId")
      }
    };
  },
  props: {
    attrObj: {
      type: Object,
      default() {
        return {
          formLabel: "",
          formProps: "",
          formModel: {},
          isDisabled: false
        };
      }
    },
    labelSpan: {
      type: Number,
      default: 6
    },
    // 区分是那个功能的上传（例如：fleetManage 车辆    driverManage 司机
    type: {
      type: String
    }
  },
  components: {},
  computed: {},
  mounted() {},
  methods: {
    onLook() {
      const viewer = this.$refs["viewer"].$viewer;
      viewer.view();
    },
    onDel() {
      this.attrObj.formModel[this.attrObj.formProps] = "";
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        const {
          file: {
            response: {
              data
            }
          }
        } = info;
        this.attrObj.formModel[this.attrObj.formProps] = data;
        this.loading = false;
      }
    },
    getBase64(img, callback) {
      const reader = new FileReader();
      reader.addEventListener("load", () => callback(reader.result));
      reader.readAsDataURL(img);
    },
    handlePreview() {},
    beforeUpload(file) {
      // 禁止拖拽上传
      if (event.type === "drop") {
        return false;
      }
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.warning("只支持jpg、png格式图片!");
        return false;
      }
      const isLt500k = file.size / 1024 / 1024 < 0.5;
      if (!isLt500k) {
        this.$message.warning("图片大小不能超过500k!");
        return false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.upload-img {
  position: relative;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1.8;
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);

  .order-select {
    width: 70%;
  }
  ::v-deep .ant-upload.ant-upload-drag {
    width: 400px;
    height: 183px;

    p.ant-upload-text {
      font-size: 12px;
    }
  }

  ::v-deep .avatar-uploader {
    & > .ant-upload {
      img {
        width: auto;
        height: 165px;
        object-fit: fill;
      }
    }
  }

  ::v-deep .ant-upload.ant-upload-drag .ant-upload {
    padding: 8px;
  }
  .del-btn {
    text-align: center;
    cursor: pointer;
    color: #3d6cf7;
  }

  ::v-deep .ant-upload.ant-upload-drag p.ant-upload-drag-icon {
    margin-bottom: 0;

    .anticon {
      color: #000;
    }
  }

  .descrip-text {
    font-size: 14px;
    margin-top: 20px;
    color: rgba(0,0,0,0.2500);
  }
}

.upload-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: default;
  opacity: 0;
  transition: opacity 0.3s;
}

.upload-actions:hover {
  opacity: 1;
}

.upload-actions::after {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: "";
}

.upload-actions-delete {
  cursor: pointer;
  color: #ff4d4f;
}
</style>
